<template>
  <div>
    <searchForm
      :loadData="loadData"
      :currentPage="currentPage"
      class="searchForm"
    />

    <!-- 新增用户按钮 -->
    <div>
      <el-button type="primary" @click="addUserHandle" class="add"
        >新增</el-button
      >
    </div>

    <ladyTable
      :data="data"
      :total="total"
      :loadData="setPage"
      :page="currentPage"
      :setVisible="setVisible"
      @setrow="setRow"
    />
    <!-- 弹出层 -->
    <mydialog
      :dialogFormVisible="dialogFormVisible"
      @set-visible="setVisible"
      :setVisible="setVisible"
      :userid="userid"
      :getrow="getrow"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import searchForm from "./ui/searchForm.vue";
import ladyTable from "./ui/ladyTable.vue";
import useUserList from "@/hooks/ladyUser";
import mydialog from "./ui/mydialog.vue";
import type { UserListType } from "@/typings/ladyType";
const userid = ref(0);

// 获取ladyTable里面传过来的row
const getrow = ref();
const setRow = (row: any) => {
  getrow.value = row;
};
console.log(getrow.value);

const [currentPage, data, total, loadData] = useUserList();
const setPage = (page: number) => {
  loadData(page);
};
// 默认弹框不显示
const dialogFormVisible = ref(false);
const setVisible = (v: boolean, id?: number) => {
  if (typeof id === "number") userid.value = id;
  dialogFormVisible.value = v;
  // 这里注释了老师的代码，当添加数据时不更新表单是为了防止mock的数据变化
  if (!v) {
    userid.value = 0;
    // console.log(222)
    loadData(currentPage.value);
  }
};
const addUserHandle = () => {
  setVisible(true);
};
</script>

<style scoped>
/*  */
.add {
  margin-left: 10px;
  float: left;
  margin-top: 20px;
}
.searchForm {
  float: left;
  margin-top: 20px;
  margin-left: 10px;
}
</style>
